<script lang="ts" module>
    export const ButtonGroupContextKey = Symbol("ButtonGroupContextKey");
</script>

<script lang="ts">
    import { setContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { ButtonGroupContext, ButtonGroupProps } from "./ButtonGroup";
    const props: ButtonGroupProps = $props();

    setContext(ButtonGroupContextKey, {
        type: props.type,
        theme: props.theme,
        size: props.size,
        disabled: props.disabled,
    } as ButtonGroupContext);

    const classList = $derived(useClassList(props, "cm-button-group"));
</script>

<div class={classList}>
    {@render props.children?.()}
</div>
